<template>
  <div class="box">
    <router-link to="home"><h3>印否-后台管理系统</h3></router-link>
    <template>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="file" label="文件名" width="120">
        </el-table-column>
        <el-table-column prop="creatAt" label="创建日期"> </el-table-column>
        <el-table-column
          prop="status"
          :formatter="formatterColumn"
          label="订单状态"
        >
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-setting"
              @click="onlick(scope.row)"
              circle
            ></el-button>
            <!-- <order-detail v-if="dialogVisible" ref="orderDetail"></order-detail> -->
            <el-dialog
              title="订单详情"
              :visible.sync="dialogFormVisible"
              append-to-body
            >
              <div class="upload-demo">
                <el-form ref="form" :model="form" label-width="80px">
                  <div>
                    <el-form-item label="文件名 ">
                      <span>{{ form.name }}</span>
                    </el-form-item>
                    <el-form-item label="打印类型">
                    
                        <span>{{ form.type==0?"单面":"双面" }}</span>
                      
                    </el-form-item>
                    <el-form-item label="打印份数">
                      <span>{{ form.copies }}</span>
                    </el-form-item>
                    <el-form-item label="页  数">
                      <span>{{ form.page }}</span>
                    </el-form-item>
                    <el-form-item label="价 格">
                      <span>{{ form.prices}}</span>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="goPrint" 
                        >立即下载</el-button
                      >
                      <el-button href="https://www.baidu.com">取消</el-button>
                    </el-form-item>
                  </div>
                </el-form>
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <!-- <p>status的值为{{ tableData }}</p> -->
    </template>
  </div>
</template>

<script>
import { FindAllOrder } from "../api/order";
import { FindFile } from "../api/order";

export default {
  data() {
    return {
      // dialogVisible: false,
      dialogFormVisible: false,
      tableData: [],
      form: {
        name: "",
        type: "",
        copies: "",
        page: "",
        prices: "",
        uid: "",
      },
      formLabelWidth: "120px",
    };
  },
  mounted() {
    this.Find();
  },
  methods: {
    goPrint() {
      console.log(this.form.name)
      window.open('https://print-bucket.oss-cn-chengdu.aliyuncs.com/'+this.form.name,"_self")
    },

    onlick(row) {
      console.log(row);
      
      console.log(row.file);
      FindFile(row.file).then((res)=>{
        console.log("正在加载。。。");
        console.log(res)
        if(res.data.code==200){
          this.dialogFormVisible = true;
          this.form=res.data.file;
          console.log(this.form.type)
          }else{
            return this.$message.error("请稍后再试！");
          }
        
      })

    
    },

    formatterColumn(row, column) {
      switch (row.status) {
           case 0:
          return "待付款";
          break;
        case 1:
          return "已支付";
          break;
        case 2:
          return "已打印";
          break;
        case 3:
          return "已完成";
          break;
        case 4:
          return "已取消";
          break;
        case 5:
          return "售后中";
          break;
        case 6:
          return "售后完成";
          break;
        default:
          return row.status;
      }
    },
    
    Find() {
      FindAllOrder().then((res) => {
        if (res.data.code == 200) {
          //this.list = res.data;
          this.tableData = res.data.page.list;
        }
      });
    },
  },
};
</script>

<style scoped>
.box {
  position: absolute; /* 相对定位或绝对定位均可 */
  width: 900px;
  height: 800px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>